<template>
  <div class="my-container">
      <shop-bar></shop-bar>
      <product-bar></product-bar>
      <el-container  class="main-container">
        <el-main  class="main-product">
          <shop-tab></shop-tab>
          <el-row class="card-row">
            <el-col :span="24" v-for="(product, index) in productList" :key="product">
              <el-card class="main-card" :body-style="{ padding: '0px' }">
                <template >
                  <div class="card-image">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="Card image">
                  </div>
                </template>
                <template >
                  <div class="card-content">

                    <h2 class="card-title" @click="toDetail(product)" >{{ product.productTilte }}</h2>
                    <div class="card-text">{{ product.productDescription}}</div>
                    <div class="card-footer">
                      <div style="float: left;margin-left: 10px"><i class="el-icon-paperclip"></i>{{ product.productAuthor}}</div>
                      <i class="el-icon-time"></i>{{ product.creatTime|formatDate(true) }}
                      <div style="float: right;margin-right: 20px"> <i class="el-icon-view"></i>1111</div>
                    </div>
                  </div>
                </template>
              </el-card>
            </el-col>
          </el-row>
          <shop-page
              :page="queryParameter.page"
              :pageSize="queryParameter.pageSize"
              :total="queryParameter.total"
              :sendPage="getPage"
          ></shop-page>
        </el-main>
        <el-main class="main-tags">
              <el-card  class="main-tags-tag" :body-style="{ padding: '0px' }">
                <el-tag type="success">java</el-tag>
                <el-tag type="info">mysql</el-tag>
                <el-tag type="warning">标签四11</el-tag>
                <el-tag type="danger">标签五11111</el-tag>
                <el-tag type="danger">标签五11</el-tag>
                <el-tag type="danger">标签五</el-tag>
              </el-card>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import productApi from "@/api/user/product_api.js";
import {formatDate} from "@/util/util";

export default {
  data() {
    return {

      queryParameter:{
         page:1,
         pageSize:3,
         total:0,
        productTilte:null
      },
      productList:[]

    };
  },


  created() {
    this.init();
  },


  methods: {
    init(){
      this.loadProductData(this.queryParameter)
    },

    loadProductData(queryParameter){
      productApi.getProduct(queryParameter).then(res=>{
        this.productList=res.data.data.list
        this.queryParameter.page=res.data.data.pageNum
        this.queryParameter.total=res.data.data.total
      })
    },
    getPage(page){
      this.queryParameter.page=page;
      this.loadProductData(this.queryParameter)
    },
    toDetail(product){
      this.$router.push({
        path: `/product/detail/${product.id}`,
        // query: { 'id':product.id },
      })
    }
  }
};
</script>

<style scoped>
.card-title{
  cursor: pointer;
  text-align: left;
}
.card-text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 这里的“3”表示最多显示三行 */
  -webkit-box-orient: vertical;
  text-indent: 1em;
  margin-right: 1em;
  width: 95%;
}
.card-footer{
 margin-top: 5%;
  width: 100%;
  height: 1.5em;
  font-size: 16px;
}

.main-product {
  width: 70%;
  justify-content: center;
}
.main-tags {
   width: 30%;
   margin-top: 60px;
 }

.main-card{
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 2%;
}
.main-tags-tag{
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  height: 15em;
}
.main-tags-tag .el-tag{
  margin-top: 10px;
  margin-left: 10px;
  float: left;
}
.card-content {
  padding: 14px;
  overflow: hidden; /* 清除浮动 */
  margin-bottom: 2%;
}
.card-image {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-image img {
  max-width: 100%;
  max-height: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-row {
  justify-content: center;
}
</style>
